<!--
  * 角色 设置
  * 
  * @Author:    zhoujk
  * @Date:      2025-02-09 19:22
  *
-->
<template>
  <a-modal v-model:open="visible" :width="900" title="管理权限" @cancel="closeModal" :footer="null">
    <a-tabs v-model:activeKey="activeKey">
      <a-tab-pane key="1" tab="角色-功能权限">
        <RoleTree />
      </a-tab-pane>
      <a-tab-pane key="2" tab="角色-数据范围">
        <RoleDataScope />
      </a-tab-pane>
    </a-tabs>
  </a-modal>
</template>
<script setup>
  import { ref, provide } from 'vue'
  import RoleDataScope from '../role-data-scope/index.vue'
  import RoleTree from '../role-tree/index.vue'

  defineProps({
    value: Number,
  })

  defineEmits(['update:value'])

  let activeKey = ref()

  // ----------------------- 以下是字段定义 emits props ---------------------
  defineExpose({
    showModal,
  })

  // ----------------------- modal  显示与隐藏 ---------------------
  const visible = ref(false)
  const selectRoleId = ref('')

  async function showModal(roleId) {
    selectRoleId.value = roleId
    activeKey.value = '1'
    visible.value = true
  }

  function closeModal() {
    visible.value = false
  }

  provide('selectRoleId', selectRoleId)
</script>
<style scoped lang="less">
  .role-container {
    height: 100%;
  }
</style>
